@use "@/common/styles/colors"

.identities-page
  display: flex
  flex-direction: column
  gap: 2rem

  .identities-section
    h2
      margin: 0
      color: colors.$white

    p
      color: colors.$subtext
      margin: 0

    .section-header
      display: flex
      justify-content: space-between
      align-items: flex-start
      margin-bottom: 2rem

      .header-content
        h2
          font-size: 1.5rem
          margin-bottom: 0.5rem
        
        p
          font-size: 1rem

    .identities-grid
      display: grid
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
      gap: 1.5rem

      .identity-card
        background-color: colors.$dark-gray
        border: 1px solid colors.$gray
        border-radius: 0.75rem
        padding: 1.5rem
        transition: all 0.2s ease
        display: flex
        justify-content: space-between
        align-items: flex-start

        &:hover
          border-color: colors.$primary
          transform: translateY(-2px)
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)

        .identity-info
          display: flex
          align-items: flex-start
          gap: 1rem
          flex: 1

          .identity-icon
            width: 2.5rem
            height: 2.5rem
            color: colors.$primary
            margin-top: 0.125rem
            flex-shrink: 0

          .identity-details
            h3
              margin: 0 0 0.5rem 0
              color: colors.$white
              font-size: 1.1rem
              font-weight: 600

            .identity-username
              margin: 0 0 0.75rem 0
              color: colors.$light-gray
              font-size: 0.85rem

            .identity-type
              background-color: colors.$primary
              color: colors.$white
              padding: 0.25rem 0.75rem
              border-radius: 12px
              font-size: 0.75rem
              font-weight: 600
              display: inline-block

        .identity-actions
          display: flex
          gap: 0.5rem
          flex-shrink: 0

          .action-btn
            background: none
            border: 1px solid colors.$gray
            border-radius: 0.375rem
            padding: 0.5rem
            cursor: pointer
            color: colors.$light-gray
            transition: all 0.2s ease
            display: flex
            align-items: center
            justify-content: center
            width: 2rem
            height: 2rem

            &:hover
              transform: scale(1.05)

            &.edit-btn:hover
              background-color: colors.$primary
              border-color: colors.$primary
              color: colors.$white

            &.delete-btn:hover
              background-color: colors.$error
              border-color: colors.$error
              color: colors.$white

      .no-identities
        grid-column: 1 / -1
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        padding: 4rem 2rem
        color: colors.$subtext

        svg
          width: 4rem
          height: 4rem
          margin-bottom: 1rem

        h2
          margin: 0 0 0.5rem 0
          color: colors.$white
          font-size: 1.3rem

        p
          margin: 0
          text-align: center
          max-width: 24rem
